<template>
	<view :class="viewClass" v-if="view">
		<view class="toast-img">
			<image src="../static/1.png" mode="aspectFill"></image>
		</view>
		<text class="toast-text">{{title}}</text>
	</view>
</template>

<script>
	export default {
		name: "toast",
		props: {
			timeOut: {
				type: Number,
				default: 2000
			}
		},
		data() {
			return {
				view: false,
				viewClass: 'toast-component', 
				title: '默认提示'
			};
		},
		methods: {
			showToast(data) {
				if (this.view) {
					return;
				}
				this.view = true;
				this.title = data;
				setTimeout(() => {
					this.viewClass = 'toast-component-fadeout';
				},1000);
				setTimeout(() => {
					this.viewClass = 'toast-component';
					this.view = false;
				},1250);
			}
		},
		mounted() {

		}
	}
</script>

<style>
	.toast-component ,.toast-component-fadein ,.toast-component-fadeout {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		border: 1px solid #007AFF;
		border-width: 1px;
		z-index: 9999;
		height: 35px;
		width: 120px;
		box-sizing: border-box;
	}
	.toast-component{
		animation: none;
	}
	.toast-component-fadein {
		animation: fade-in linear .25s 1 forwards;
	}
	.toast-component-fadeout {
		animation: fade-out linear .25s 1 forwards;
	}

	.toast-img {
		height: 18px;
		width: 18px;
		margin-right: 5px;
	}

	.toast-img image {
		height: 18px;
		width: 18px;
	}

	.toast-text {
		line-height: 33px;
		font-size: 14px;
	}
	
	@keyframes fade-in{
		from{
			opacity: 0;
		}
		to{
			opacity: 1;
		}
	}
	@keyframes fade-out{
		from{
			opacity: 1;
		}
		to{
			opacity: 0;
		}
	}
</style>
